<template>
  <view class="container">
    <view class="tab-bar">
      <UniRow>
        <UniCol :span="12">
          <view class="tab-pane" @click="setTabCurrent('in')">
            <view class="tab-title" :class="tabCurrent === 'in'? 'active' : ''">{{ $t('allocate.tab.allocateInbound') }}</view>
          </view>
        </UniCol>
        <UniCol :span="12">
          <view class="tab-pane" @click="setTabCurrent('out')">
            <view class="tab-title" :class="tabCurrent === 'out'? 'active' : ''">{{ $t('allocate.tab.allocateOutbound') }}</view>
          </view>
        </UniCol>
      </UniRow>
    </view>
    <view class="search-bar">
      <UniSearchBar :placeholder="`${$t('allocate.search.placeholder')}`" v-model="keyword" @confirm="search"
                    :foucs="numFocus" @blur="formblur" @input="forminput" @cancel="cancel" cancel-text="cancel">
      </UniSearchBar>
    </view>
    <view class="list">
      <uni-list>
        <uni-list-item v-for="(item, index) in businessList" :key="index" showArrow :title="`${getNoText}: ${item[getNoVal]}
				${$t('allocate.item.businessNo')}: ${item.businessNo || '-'}
				 `" :note="`${$t('allocate.item.confirmUserName')}: ${item.confirmUserName || '-'}; ${$t('storeAllocate.type')}: ${ getTypeName(item) }`"
         :rightText="`${getTotalNumText}: ${item.totalNum} \n ${getNumText}: ${item[getNumVal] || '-'}`" link="navigateTo"
         :to="`/pages/storeAllocateDetail/index?id=${item.id}&tabCurrent=${tabCurrent}&allocateOrderType=${item.allocateOrderType}`" />
      </uni-list>
      <uni-load-more :status="status" :icon-size="14" :content-text="contentText" @clickLoadMore="loadmore" />
    </view>
  </view>
</template>

<script>
import api from '../../common/api.js'
import UniRow from "@/components/uni-row/uni-row.vue";
import UniCol from "@/components/uni-row/uni-col.vue";
import UniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
import {storeAllocateOrderType} from "@/common/utils";

export default {
  components: {UniSearchBar, UniCol, UniRow},
  data() {
    return {
      status: 'more',
      contentText: {
        contentdown: this.$t('load.more.contentdown'), //'查看更多',
        contentrefresh: this.$t('load.more.contentrefresh'), //'加载中',
        contentnomore: this.$t('load.more.contentnomore') // '没有更多了'
      },
      pageIndex: 1,
      keyword: '', // 调拨单号
      businessList: [],
      code: '',
      numFocus: false,
      pdacode: '',
      // tab
      tabCurrent: 'in',
    }
  },
  onNavigationBarButtonTap(e) {
    console.log(e, '----e---')
    let that = this
    uni.scanCode({
      success: async function (res) {
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);
        that.code = res.result
        await that.findByCode()
      }
    });
  },
  onLoad() {

  },
  computed: {
    // 请求函数
    pageFunc() {
      return this.tabCurrent === 'in'? api.postStoreAllocateInboundPage : api.postStoreAllocateOutboundPage
    },
    // 单号
    getNoText() {
      return this.tabCurrent === 'in'? this.$t('allocate.item.inboundNo') : this.$t('allocate.item.outboundNo')
    },
    getNoVal() {
      return this.tabCurrent === 'in'? 'inboundNo' : 'outboundNo'
    },
    // 总数
    getNumText() {
      return this.tabCurrent === 'in'? this.$t('allocate.item.inboundNum') : this.$t('allocate.item.outboundNum')
    },
    getNumVal() {
      return this.tabCurrent === 'in'? 'inboundNum' : 'outboundNum'
    },
    getTotalNumText() {
      return this.tabCurrent === 'in'? this.$t('allocate.item.inboundTotalNum') : this.$t('allocate.item.outboundTotalNum')
    }
  },
  methods: {
    getTypeName(record) {
      const typeList = [...storeAllocateOrderType];
      const type = typeList.find((item) => item.value.includes(record.allocateOrderType))?.key;
      if (type === 'store') {
        return this.$t('storeAllocate.store')
      } else if (type === 'apply') {
        return this.$t('storeAllocate.apply')
      }
      return '-'
    },
    setTabCurrent(val) {
      this.tabCurrent = val;
      // 重置参数
      this.keyword = '';
      this.businessList = [];
      // 切换时需要重新请求
      this.getPage();
    },
    forminput(){
      this.pdacode = ''
    },
    formfocus() {
      this.pdacode = ''
      setTimeout(() => {
        this.isFocus = false
        this.numFocus = true
      }, 0)
    },
    formblur() {
      // console.log(e.detail.value)
      this.pdacode = ''
      this.numFocus = false;
    },
    async scancodelisten(e) {
      let keyCode = e.keyCode
      // console.log(e, '-----e---')
      if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122)) {
        console.log('字母输入:', e.key);
        this.pdacode = this.pdacode + e.key
      } else if (keyCode >= 48 && keyCode <= 57) {
        console.log('数字输入:', e.key);
        console.log(this.numFocus, 'numFocus');
        this.pdacode = this.pdacode + e.key
      } else if (keyCode === 13) {
        this.code = this.pdacode
        if(this.code!==''){
          await this.findByCode()
        }
        this.pdacode = ''
      } else {
        console.log('其他输入:', e.key);
      }

      console.log(this.pdacode, '-----this.pdacode---')
    },
    async findByCode() {

    },
    async onShow() {
      await this.getPage();
    },
    async getPage() {
      let ret = await this.pageFunc({
        keyword: '', page: { pageNumber: this.pageIndex, pageSize: 50 }, type: 2,
        allocateOrderTypeList: this.tabCurrent === 'in' ? [3,6] : [2,5]
      })
      console.log(ret, '======ret===page')
      if (ret.code === 0 && ret.data.items.length > 0) {
        this.businessList = ret.data.items
      }
    },
    async cancel() {
      this.keyword = ''
      this.pageIndex = 1
      await this.getPage();
    },
    async search(e) {
      this.keyword = e.value
      this.pageIndex = 1
      await this.getPage();
    },
    async scrolltolower() {
      console.log('scrolltolower-------scrolltolower---')
      await this.loadmore();
    },
    async loadmore() {
      uni.showLoading({ title: 'Loading...', mask: true })
      this.pageIndex++
      let ret = await this.pageFunc({
        keyword: this.keyword, page:{pageNumber: this.pageIndex,pageSize:50}, type: 2,
        allocateOrderTypeList: this.tabCurrent === 'in' ? [3,6] : [2,5]
      })
      if(ret.code===0) {
        if(ret.data.items.length>0){
          this.businessList = [].concat(this.businessList, ret.data.items)
        }else{
          this.pageIndex--
        }
      }
      uni.hideLoading()
    },
  }
}
</script>

<style>
.container {
  height: 100vh;
}

.search-bar,
.tab-bar {
  /* 根据实际高度调整，示例假设搜索栏高度约50px */
  flex-shrink: 0;
  margin-left: 10rpx;
  margin-right: 20rpx;
}

.tab-bar {
  padding: 6px;
}

.tab-pane {
  width: 100%;
  height: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.tab-title {
  width: 100rpx;
}

.active {
  position: relative;
  color: #3c9cff;
}
.active::after {
  content: '';
  width: 100rpx;
  height: 4rpx;
  background-color: #3c9cff;
  position: absolute;
  bottom: -10rpx;
  left: 0;
}

.title-item {
  padding-bottom: 10rpx;
  padding-top: 10rpx;
}
</style>